<template>
  <div class="master">
    <h1>E元微购 - 后台管理系统</h1>

    <!-- 登录框 -->
    <div class="login_div">
      <el-form :model="ruleForm" status-icon ref="ruleForm" class="demo-ruleForm">
        <el-form-item label="账号" prop="username">
          <el-input type="text" v-model="ruleForm.username"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input type="password" v-model="ruleForm.password"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="login()">登录</el-button>
          <el-button>重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {

  //数据部分
  data() {
    return {
      ruleForm: {
        username: '',
        password: ''
      }
    };
  },
  //方法的部分
  methods: {
    //登录
    login(){
      //发送ajax
      this.$.ajax({
        type: "POST",
        url: this.$.url.login,
        data: this.ruleForm,
        success: (data) => {
          if(data.code == 200) {
            //提示
            this.$message({
              message: '欢迎' + data.data.name + '登录',
              type: 'success'
            });

            //保存登录的用户信息
            // localStorage 只能放字符串
            // localStorage.setItem("login_emp", JSON.stringify(data.data));
            this.$.save("login_emp", data.data);
            //页面跳转
            this.$router.push("/index");
          } else {
            this.$message.error('登录失败，账号或者密码错误！');
          }
        }
      });
    }
  }

}
</script>

<style>
  .master {
    background-color: gray;
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
  }

  .login_div {
    width: 600px;
    height: 400px;
    border: 1px solid black;
    margin-top: 40px;
    border-radius: 10px;
    background-color: #2C3E50;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
</style>
